<template>
	<view class="tab-sticky">
		<!--头部搜索start-->
		<view class="search-padding">
			<u-search
				:disabled="true"
				height="80"
				:show-action="false"
				placeholder="关键字搜索"/>
		</view>
		<!--头部搜索end-->
		<view class="background-block"></view>
		
		<!--广告图start-->
		<view class="banner-border">
			<u-swiper :list="list" :title="true"></u-swiper>
		</view>
		<!--广告图end-->
		
		<u-sticky offset-top="146">
			<u-tabs-swiper ref="uTabs"
				:is-scroll="false"
				:list="tablist" 
				:current="current" 
				@change="tabsChange"
				swiperWidth="750">
			</u-tabs-swiper>
		</u-sticky>
		
		<!-- swiper动态绑定高度，因为每一个tab页的高度都可能不同  -->
		<swiper class="swiper" 
			:style="{height:swiperHeight+'px'}"
			:current="swiperCurrent" 
			@transition="transition" 
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsData" :key="index">
		
				<view :class="`list-height`+index">
					<view class="li-block" v-for="(content, i) in item.dataList" :key="i">
						{{content}}
					</view>
					<view class="loadmore-bottom">
						<u-loadmore :status="status"/>
					</view>
				</view>
				
			</swiper-item>
		</swiper>
		
  </view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						image: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
						title: '1111111'
					},
					{
						image: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
						title: '222222'
					}
				],
				tablist: [{
					name: 'tab1'
				},{
					name: 'tab2'
				},{
					name: 'tab3'
				}],
				current: 0,
				swiperCurrent: 0,
				tabsData: [  // 3个tab页就有3个对象，以此类推
					{
						dataList: [],
						pagesNo: 1
					},
					{
						dataList: [],
						pagesNo: 1
					},
					{
						dataList: [],
						pagesNo: 1
					}
				],
				scrollTops: [0, 0, 0],
				swiperHeight: 0,
				blockTop: 0,
				scroll: false,
				status: 'nomore'
			}
		},
		onLoad() {
			this.getSwiperListData(20);
		},
		onReady() {
			//获取在tab以及搜索栏中间部分的位置的高度, 这里一定要动态获取，否则机型问题高度也会不同
			let info = uni.createSelectorQuery().select('.banner-border');
			info.boundingClientRect((data) => {
				//将高度赋值
				this.blockTop = data.height; 
			}).exec();
		},
		onPageScroll({scrollTop}){
			//判断当前是否tab吸顶了
			if(scrollTop >= this.blockTop){
				this.scroll = true; //用来是否调用tab复位的状态
				//将现在进行的滑动的坐标赋值给对应的tab项 ，如tab1的当前坐标点
				this.scrollTops[this.swiperCurrent] = scrollTop;
			}else{
				//如果当前tab并不是吸顶状态那么就不需要对tab页坐标复位
				this.scroll = false;
				//并且当前需要重置所有tab页的触摸坐标点, +2是因为可能有一点坐标偏差问题
				this.scrollTops.forEach((item, index) => {
					this.scrollTops[index] = this.blockTop + 2;
				})
			}
		},
		onReachBottom() {
			//当滑动到页面底部触发监听
			this.status = 'loading';
			//加载下一页数据
			this.getSwiperListData(10);
		},
		watch: {
			tabsData: { //监听当前tabs列表的对象变化
				handler(){
					this.$nextTick(() =>{
						//如果发生了改变，那么就动态计算swiper的高度，
						//必须在所有节点都挂在完成才获取高度所以使用$nextTick
						this.initSwiperHeight();
					})
				},
				deep: true
			}
		},
		methods: {
			
			getSwiperListData(num){
				//这里只是请求的例子，改成自己的接口请求
				setTimeout(() => {
					for(let i=0; i<num; i++){
						this.tabsData[this.swiperCurrent].dataList.push(i);
					}
					this.status = 'none';
				},1500)
			},
			
			initSwiperHeight(){
				//通过uni的api获取元素信息
				let info = uni.createSelectorQuery().select(`.list-height${this.swiperCurrent}`);
				info.boundingClientRect((data) => {
					//将高度赋值
					this.swiperHeight = data.height; 
				}).exec();
			},
			
			/**tabs通知swiper切换*/
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			
			/**swiper-item左右移动，通知tabs的滑块跟随移动*/
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			
			/**swiper滑动结束，分别设置tabs和swiper的状态*/
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				//切换的时候返回当前页的触摸位置
				if(this.scroll){
					uni.pageScrollTo({
						scrollTop: this.scrollTops[this.swiperCurrent]
					})
				}
				
				//如果当前tab页的数组长度为0，说明可以进行加载
				//如果已经不为0了那么没必要切换的时候一直去重复加载
				if(this.tabsData[current].dataList.length === 0){
					this.status = 'loading';
					this.getSwiperListData(10);
					return
				}
				//tab切换的时候重新计算一次高度
				this.initSwiperHeight();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tab-sticky{
		height: 100%;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		&::after{
			content: '';
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
		}
	}
	.search-padding{
		padding: 34rpx 24rpx;
		background-color: #fff;
		z-index: 9;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}
	.background-block{
		height: 148rpx;
	}
	.swiper {
		height: 100%;
	}
	.li-block{
		height: 200rpx;
		box-shadow: 0 0 10rpx #000;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.loadmore-bottom{
		padding-bottom: 30rpx;
	}
</style>
